<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="nav">
        <div id="role" :class="{active:keys=='role'}" @click="ck('role')">角色管理</div>
        <div id="company" :class="{active:keys=='company'}" @click="ck('company')">公司信息</div>
      </div>
      <!-- 角色 -->
      <Role v-if="keys=='role'" />
      <!-- 公司信息 -->
      <Company v-else />
    </div>

  </div>
</template>

<script>
import Role from './components/role.vue'
import Company from './components/company.vue'
export default {
  components: {
    Role,
    Company
  },
  data() {
    return {
      showPremDialod: false,
      keys: 'role'
    }
  },
  methods: {
    ck(str) {
      this.keys = str
    }

  }
}
</script>

<style scoped>
.nav {
display: flex;
margin-bottom: 20px;
}
#role,
#company{
margin-right: 30px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.active{
border-bottom: 2px solid blue;
}
</style>
